<template>
    <el-tabs type="border-card">
        <el-tab-pane label="会员支付" style="height: 400px">
            <div class="zhuti" v-show="true">
                <div class="biao">
                    <div class="hao">
                        <el-row>
                            <el-col :span="14">
                                <div class="grid-content bg-purple">
                                    <span class="wen">桌 号：{{zhuohao}}</span>
                                </div>
                            </el-col>
                            <el-col :span="10">
                                <div class="grid-content bg-purple">
                                    <span class="wen">订单号：{{dingdanhao}}</span>
                                </div>
                            </el-col>
                        </el-row>
                        <span class="wen">消费明细：</span>
                    </div>
                    <el-table
                            :data="currentData"
                            border
                            :cell-style="cell_style"
                            :header-cell-style="header_style">
                        <!--                设置表格文字居中-->
                        <el-table-column
                                type="index"
                                label="菜品编号"
                                width="120"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="dishesMainId"
                                label="菜名"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="number"
                                label="菜式数量"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="price"
                                label="菜品价格">
                        </el-table-column>
                        <el-table-column
                                label="金额"
                        >
                            <!--                            这一列显示每一样菜应该付的钱-->
                            <template slot-scope="scope">
                                ￥{{ (scope.row.sum = parseInt(scope.row.price) *parseInt(scope.row.number)) |
                                keepTwoNum
                                }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div>
                        <el-pagination
                                background hide-on-single-page
                                layout="prev, pager, next"
                                :total="caiData.length"
                                :page-size="4"
                                :pager-count="5"
                                @current-change="changePage"
                        >
                        </el-pagination>
                    </div>
                    <div class="hao">
                        <div id="jia">*订单总消费：￥{{sumMoney.toFixed(2)}}</div>
                    </div>
                    <!--                    现金支付的框-->
                </div>
                <el-form :inline="true" label-position="right" class="hangnei">
                    <el-form-item label="请输入会员ID/手机号:" label-width="250px" required>
                        <el-input v-model="input" placeholder="" @blur="yanVIp"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <p v-show="yan">
                            <i class="el-icon-success dui" v-show="shi"></i>
                            <i class="el-icon-error cuo" v-show="bushi"></i>
                            {{isVIP}}</p>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" label-position="right" class="hangnei" v-show="iszhe">
                    <el-form-item label="请输入密码:" label-width="250px" required>
                        <el-input v-model="password" placeholder=""></el-input>
                    </el-form-item>
                </el-form>

                <el-form :inline="true" label-position="right" class="hangnei" v-show="iszhe">
                    <el-form-item label="卡上余额:" label-width="250px" required>
                        <p>￥{{yue}}</p>
                    </el-form-item>
                    <el-form-item label="">
                        <p v-show="gou">
                            <i class="el-icon-success dui" ></i>
                            {{isEnough}}</p>
                    </el-form-item>
                    <el-form-item label="可享受折扣:" >
                        <p>{{zhe}}</p>
                    </el-form-item>
                </el-form>
                <el-form :inline="true" label-position="right" class="hangnei" v-show="iszhe">
                    <el-form-item label="折后价:" label-width="250px" required>
                        <h3>￥{{zheHou}}</h3>
                    </el-form-item>
                </el-form>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-button type="primary" @click="zhifu">确定</el-button>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-button type="primary" @click="quxiao">取消</el-button>
                        </div>
                    </el-col>
                </el-row>

                <!--                下面是弹框成功和取消-->


                <el-dialog title="结账信息" :visible.sync="dialogqxVisible" width="38%"
                           center>
                    <el-row>


                    </el-row>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="">确 定</el-button>
                        <el-button @click="dialogImgVisible = false">取 消</el-button>

                    </div>
                </el-dialog>
            </div>
        </el-tab-pane>
    </el-tabs>
</template>

<script>

    import axios from '../../http/http'
    import * as api from '../../http/api'
    import bus from '../../bus'

    export default {
        name: "j_hyzf",
        filters: {
            keepTwoNum(value) {
                value = Number(value);
                return value.toFixed(2)
            }
        },
        data() {
            return {
                currentPage: 1,//当前页

                caiData: [],//数据
                dialogFormVisible: false,
                dialogqxVisible: false,
                shi: false,
                bushi:false,
                yan:false,
                iszhe:false,
                gou:false,
                zhuohao: '',//桌号
                dingdanhao: '',//订单号

                input: '',//会员ID
                username: '',
                password:'',//密码
                yue: '',//余额
                zhe: 0,//0折扣
                isVIP: '',//是不是VIP
                isEnough: '',//
                isCheng: '成功的话是支付成功，失败就是失败',

                isSHOW: false,
                isTishi: false,

            }

        },
        methods: {

            cell_style(row, column, rowIndex, columnIndex) {
                return ' text-align: center';
            },
            header_style(row, rowIndex) {
                return ' text-align: center';
            },//表格文字居中
            //分页翻页
            changePage(val) {
                this.currentPage = (val)

            },
            //看是不是会员
            yanVIp() {
                axios({
                    url: api.selectVIP,
                    method: 'get',
                    params: {condition: this.input},
                }).then(res => {
                    this.yan=true
                    // console.log(res)
                    if (res.data.code === 200) {
                        this.shi=true
                        this.bushi=false
                        this.isVIP='会员账号输入正确。'
                        this.zhe=res.data.info.discount*10
                        this.iszhe=true
                        this.yue=res.data.info.money
                        this.username=res.data.info.name
                        if(this.yue>this.zheHou||this.yue==this.zheHou){
                            this.gou=true
                            this.isEnough='余额充足'
                        }else {
                            this.$confirm('余额不足, 是否去充值?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning',
                                center: true
                            }).then(() => {
                                this.$router.push('/index/tt_hycz')

                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '那就收现钱吧'
                                })
                                this.$router.push('/index/j_fhyzf')
                            })
                        }
                    } else if (res.data.code === 400) {
                        this.bushi=true
                        this.shi=false
                        this.iszhe=false
                        this.isVIP='账号错误，请重试！'
                    }

                })

            },
            //确认支付了
            zhifu() {
                this.dialogFormVisible = true
                let data ={
                    orderId: this.dingdanhao,
                    price: this.sumMoney.toString(),
                    username: this.username,
                    password:this.password
                }
                //这里需要请求  扣钱
                // console.log(data)
                axios({
                    url:api.vipPay,
                    method:"post",
                    data:data
                }).then(res=>{
                   // console.log(res)
                    if(res.data.code===200){
                        if(res.data.code===200){
                            this.$confirm('结账成功, 是否修改餐桌状态?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning',
                                center: true
                            }).then(() => {
                                this.$router.push('/index/j_czgl')

                            }).catch(() => {
                                this.$router.push('/index/syn_index')
                                this.$message({
                                    type: 'info',
                                    message: '记得去修改餐桌状态！'
                                })
                            })

                        }else if(res.data.code===400){
                            this.$alert('<strong>结账失败，请稍后再试!', '提示', {
                                dangerouslyUseHTMLString: true
                            });
                        }

                    }
                })

                // 成功弹框
                // 失败弹框
            },

            //取消  回去
            quxiao() {
                this.$confirm('操作将会离开此页面，回到点菜页面', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$router.push('/index/syn_index')


                }).catch(() => {

                })
            },
            //支付完了去改状态
            quxiugai() {
                this.$confirm('结账成功, 是否修改餐桌状态?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$router.push('/index/j_czgl')

                }).catch(() => {
                    this.$router.push('/index/syn_index')
                    this.$message({

                        type: 'info',
                        message: '记得去修改餐桌状态！'
                    })
                })

            },

        },
        created() {
            bus.$on('getData', (postData => {
                this.caiData = postData.details
                this.dingdanhao = postData.orderId
                this.zhuohao = postData.seatsId
                this.isSHOW = true
            }))


        },
        computed: {
            sumMoney() {
                return this.caiData.map(
                    row => row.number * row.price).reduce(
                    (acc, cur) => (parseFloat(cur) + acc), 0)
            },
            zheHou() {
                return (this.sumMoney * this.zhe) / 10
            },
            currentData() {
                let start = (this.currentPage - 1) * 4
                let end = (this.currentPage - 1) * 4 + 4
                return this.caiData.slice(start, end)

            },
        }

    }
</script>

<style scoped lang="less">
    .zhuti {
        .biao {
            width: 80%;
            margin: 0 auto;

            .el-table {
                width: 100%;
                height: 260px;
            }

            .hao {
                text-align: left;

                p {
                    padding: 10px;
                }

                h4 {
                    padding: 10px 0;
                }
            }
        }
    }

    .dui {
        display: inline-block;
        color: #67c23a;
        margin-right: 5px;
    }
    .cuo{
        display: inline-block;
        color: #f56c6c;
        margin-right: 5px;
    }

    #jia {
        padding: 10px 0;
    }

    .wen {
        display: inline-block;
        padding: 5px 0;
    }

    .hangnei {
        text-align: left;
    }

    .bujuzhong {
        text-align: left;
    }


</style>